<template>
 <div>
   <div class="serach">
     <mt-search v-model="value"  @keyup.enter.native="serach" placeholder="请输入您想听的歌曲或者喜欢的歌手"></mt-search>
   </div>
   
     <ul class="list1">
      <li v-for="(item,i) in list" :key="i">
         {{ item.i }}
        {{ item.name }}
        <img src="../assets/play.jpg" alt="" class="photo" @click="play(item.id)">
     
      </li>
    </ul>
    <audio class="audio" :src="audioUrl" controls loop autoplay></audio>
    
     
  
         
  
 </div>
</template>

<script>
export default {
    data(){
        return{
          value:"",
          list:[],
          audioUrl:"",
          musicId:""
           }
    },methods:{

      serach(){
        var that = this;
       this.$http.get("https://autumnfish.cn/search?keywords="+this.value).then(
          function(response){
            console.log(response)
            that.list = response.data.result.songs
          },
          function(err){}
        )
        
       
      },
      play(musicId){
        
        var that = this;
        this.$axios.get("https://autumnfish.cn/song/url?id="+musicId).then(
          function(response){
            // console.log(response)
            that.audioUrl = response.data.data[0].url
          },function(err){}
        )
        
      }

      
    
    
     

    }
}
</script>
<style scoped>


.mint-search{

  height: 40px;
}
ul{

  background-color: white;
  
}
.list1{
  margin-top: 50px;
}
li{
  
  margin-top: 20px;
    display: flex;
    justify-content:space-around;
   flex-direction:row;
   align-items:stretch
}
li::nth-child(odd) {
  background-color: gray;

}
.photo{
  margin-right: 30px;
  height: 30px;
  width: 30px;
}
.audio{
  margin-bottom: 20px;
  position:fixed;
  bottom: 30px;
 color: white;
 width: 100%;
  z-index:1;
}
.serach{
  position:fixed;
  z-index: 1;
  top: 40px;
  width: 100%;
}

</style>